<template>
  <div
    class="pagination full-width row flex-center bg-white q-py-md"
  >
    {{$t('共')}} {{ localData.total || 0 }} {{$t('条')}}
    <q-pagination
      v-model="localData.page"
      :max="localData.pages || 1"
      boundary-links
      boundary-numbers
      direction-links
      :max-pages="6"
      size="16px"
    ></q-pagination>
  </div>
</template>

<script>
export default {
  name: 'PortalPagination',
  props: {
    data: Object,
  },
  data() {
    return {
      localData: {
        page: 1,
        pages: 1,
        limit: 8,
        total: 0,
      },
    };
  },
  created() {
    if (this.data && this.data.page) {
      this.localData = this.data;
    }
  },
  watch: {
    data(v) {
      if (v && v.page) {
        this.localData = v;
      }
    },
    // eslint-disable-next-line func-names
    'localData.page': function (v) {
      this.$emit('changed', v);
    },
  },
};
</script>

<style lang="scss" scoped>
.pagination {
  font-size: 16px;
  color: #67767f;
  padding: 50px 0;
}
</style>
